<template>
  <a-modal
    :visible="visible"
    :title="title"
    cancelText=" "
    okText="关闭"
    :width="1080"
    @ok="handleOk"
    @cancel="handleOk"
  >
    <div class="team-name">团队名称：{{ teamName }}</div>
    <a-table
      bordered
      row-key="id"
      height="50vh"
      :scroll="{
        y: '60vh'
      }"
      :data-source="tableData"
      :columns="columns"
      :pagination="{
        pageSize: pageObj.pageSize,
        current: pageObj.pageNum,
        total: pageObj.total,
        showTotal: (total: number) => `共${total}条数据`,
        showSizeChanger: true,
        showQuickJumper: true,
        onChange: handlePageChange
      }"
    >
    </a-table>
  </a-modal>
</template>

<script setup lang="ts">
import { useTable } from '@/hook/useTable'
import { ref, h, onMounted, watch, computed } from 'vue'
import { type TeamMemberTableColumn } from '@/api/type'
import { apiTeamMemberList } from '@/api/manage'
import { ROLE_TYPE } from '@/const'
import { useUserInfoStore } from '@/stores/modules/userInfo'
interface Props {
  visible: boolean
  title?: string
  teamId: string
  teamName: string
}
const props = withDefaults(defineProps<Props>(), {
  title: '成员列表'
})

const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void
}>()

const handleOk = () => {
  emit('update:visible', false)
}

const userStore = useUserInfoStore()
// 解构出列表数据和loading
const { tableData, loading, pageObj, handlePageChange, getList, updatedParams } = useTable({
  apiFn: apiTeamMemberList,
  isPageable: true,
  params: { teamId: userStore.userInfo.currentTeamId },
  immediate: false
})

watch(
  () => props.teamId,
  (val) => {
    updatedParams.value.teamId = val
    getList()
  },
  { immediate: true }
)

const columns = ref<Array<TeamMemberTableColumn>>([
  {
    title: '名称',
    dataIndex: 'customerName',
    width: 200
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    width: 200
  },
  {
    title: '角色',
    dataIndex: 'roleType',
    width: 200,
    customRender: ({ record }) => {
      return ROLE_TYPE[record.roleType]
    }
  },
  {
    title: '加入时间',
    dataIndex: 'createdTime',
    width: 200
  },

  {
    title: '最近登录时间',
    dataIndex: 'lastedLoginTime',
    width: 200
  }
])
</script>

<style lang="scss" scoped>
.team-name {
  font-size: 18px;
  margin-bottom: 20px;
}
// :deep() .ant-pagination-options-size-changer.ant-select {
//   width: 100px;
// }
</style>
